<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>课程信息</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

        <link rel="stylesheet" type="text/css" href="css/base.css">

        <script>
            $(document).ready(function(){
                var grades = '';
                var classes = '';
                var tchid= '';
                var tchname = '';
                var datarow = '';
                var bianhao = '';
                var limit = 10;
                var offset = 0;
                var datalength = 0;
                var admin = '[[${session.admin}]]';

                function dataload(grades, classes, tchid, tchname, limit, offset, datalength){
                    $.ajax({
                        type: "GET",
                        url: "/coursesearch",
                        data: {grades: grades, classes: classes, tchid: tchid, tchname: tchname, limit: limit, offset: offset},
                        dataType: 'json',
                        success:function(data){
                            var innertable = document.getElementById("classtbl");
                            var innerstr = '';
                            innerstr = '<thead><tr style="background-color: #ccc;"><th>No</th><th>班级</th><th>科目</th><th>教师职工号</th><th>教师姓名</th></tr></thead>';
                            if(admin == 1){
                                for(var i = 0; i < data.data.length; i++){
                                    innerstr += '<tr><th>' + String(i + 1 + offset) + '</th><th>' + String(data.data[i].grade) + '年' + String(data.data[i].class_num) + '班</th>'
                                            + '<th>' + data.data[i].course_name + '</th>' 
                                            + '<th><button type="button" class="btn btn-link changetch" data-toggle="modal" data-target="#myModal" classid="' + data.data[i].id + '" value="' + data.data[i].tch_id + '">' + data.data[i].tch_id + '</button></th>'
                                            + '<th>' + data.data[i].name + '</th></tr>';
                                }
                            }
                            else if(admin == 0){
                                for(var i = 0; i < data.data.length; i++){
                                    innerstr += '<tr><th>' + String(i + 1 + offset) + '</th><th>' + String(data.data[i].grade) + '年' + String(data.data[i].class_num) + '班</th>'
                                            + '<th>' + data.data[i].course_name + '</th>' 
                                            + '<th>' + data.data[i].tch_id + '</th>'
                                            + '<th>' + data.data[i].name + '</th></tr>';
                                }
                            }
                            innertable.innerHTML = innerstr;
                            document.getElementById("paging").style.display = 'block';
                            if(offset == 0){
                                document.getElementById("firstpage").disabled = true;
                                document.getElementById("previous").disabled = true;
                            }else{
                                document.getElementById("firstpage").disabled = false;
                                document.getElementById("previous").disabled = false;
                            }

                            if(offset >= (datalength - limit) || datalength < limit){
                                document.getElementById("next").disabled = true;
                                document.getElementById("lastpage").disabled = true;
                            }else{
                                document.getElementById("next").disabled = false;
                                document.getElementById("lastpage").disabled = false;
                            }
                    	},
                    })
                }

                $("#search").click(function(){
                    tchid = document.getElementById("tchid").value;
                    tchname = document.getElementById("tchname").value;
                    grades = document.getElementById("grades").value;
                    classes = document.getElementById("classes").value;
                    offset = 0;
                    $.ajax({
                        type: "GET",
                        url: "/coursesearch",
                        data: {grades: grades, classes: classes, tchid: tchid, tchname: tchname, limit: limit, offset: offset},
                        dataType: 'json',
                        success:function(data){
                            console.log(data);
                            var innertable = document.getElementById("classtbl");
                            var innerstr = '';
                            document.getElementById("nodata").innerHTML = '';
                            datalength = parseInt(data.count[0].count);
                            if(datalength != 0){
                                innerstr = '<thead><tr style="background-color: #ccc;"><th>No</th><th>班级</th><th>科目</th><th>教师职工号</th><th>教师姓名</th></tr></thead>';
                                if(admin == 1){
                                    for(var i = 0; i < data.data.length; i++){
                                        innerstr += '<tr><th>' + String(i + 1 + offset) + '</th><th>' + String(data.data[i].grade) + '年' + String(data.data[i].class_num) + '班</th>'
                                                + '<th>' + data.data[i].course_name + '</th>' 
                                                + '<th><button type="button" class="btn btn-link changetch" data-toggle="modal" data-target="#myModal" classid="' + data.data[i].id + '" value="' + data.data[i].tch_id + '">' + data.data[i].tch_id + '</button></th>'
                                                + '<th>' + data.data[i].name + '</th></tr>';
                                    }
                                }
                                else if(admin == 0){
                                    for(var i = 0; i < data.data.length; i++){
                                        innerstr += '<tr><th>' + String(i + 1 + offset) + '</th><th>' + String(data.data[i].grade) + '年' + String(data.data[i].class_num) + '班</th>'
                                                + '<th>' + data.data[i].course_name + '</th>' 
                                                + '<th>' + data.data[i].tch_id + '</th>'
                                                + '<th>' + data.data[i].name + '</th></tr>';
                                    }
                                }
                                innertable.innerHTML = innerstr;
                                document.getElementById("paging").style.display = 'block';
                                document.getElementById("firstpage").disabled = true;
                                document.getElementById("previous").disabled = true;
                                if(datalength < limit){
                                    document.getElementById("next").disabled = true;
                                    document.getElementById("lastpage").disabled = true;
                                }else{
                                    document.getElementById("next").disabled = false;
                                    document.getElementById("lastpage").disabled = false;
                                }
                            }
                            else{
                                innertable.innerHTML = '';
                                document.getElementById("nodata").innerHTML = '<div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>没有符合条件的数据！</div>';
                                document.getElementById("paging").style.display = 'none';
                            }
                    	},
                    })
                });

                $("#firstpage").click(function(){
                    offset = 0;
                    dataload(grades, classes, tchid, tchname, limit, offset, datalength);
                });

                $("#previous").click(function(){
                    offset = offset - limit;
                    dataload(grades, classes, tchid, tchname, limit, offset, datalength);
                });

                $("#next").click(function(){
                    offset = offset + limit;
                    dataload(grades, classes, tchid, tchname, limit, offset, datalength);
                });

                $("#lastpage").click(function(){
                    if(datalength % limit == 0){
                        offset = datalength - limit;
                    }else{
                        offset = datalength - (datalength % limit);
                    }
                    dataload(grades, classes, tchid, tchname, limit, offset, datalength);
                });
                
                $(".pagesize").click(function(){
                    offset = 0;
                    limit = parseInt(this.innerHTML);
                    dataload(grades, classes, tchid, tchname, limit, offset, datalength);
                });

                $("#clear").click(function(){
                    $("#grades").val('');
                    $("#classes").val('');
                    $("#tchid").val('');
                    $("#tchname").val('');
                    tchid = '';
                    grades = '';
                    classes = '';
                    tchname = '';
                });

                $(document).on("click", ".changetch", function(){
                    datarow = $(this);
                    var classid = $(this).attr("classid");
                    var tch_id = $(this).text();
                    var tch_name = $(this).parent().next().text();
                    var subject = $(this).parent().prev().text();
                    if(subject == '语文'){
                        $(".subjects").prop("hidden",true);
                        $(".chinese").prop("hidden",false);
                    }
                    else if(subject == '数学'){
                        $(".subjects").prop("hidden",true);
                        $(".math").prop("hidden",false);
                    }
                    else if(subject == '英语'){
                        $(".subjects").prop("hidden",true);
                        $(".english").prop("hidden",false);
                    }
                    else if(subject == '物理'){
                        $(".subjects").prop("hidden",true);
                        $(".physics").prop("hidden",false);
                    }
                    else if(subject == '化学'){
                        $(".subjects").prop("hidden",true);
                        $(".chemistry").prop("hidden",false);
                    }
                    bianhao = tch_name;
                    $(".tchid_select").val(tch_id);
                    $(".tch_name").val(tch_name);
                    $(".classid").val(classid);
                });

                $(".tchid_select").bind("change",function(){
                    bianhao = $(this).find("option:selected").attr('tchname');
                    $(".tch_name").val(bianhao);
                });

                $("#revise").click(function(){
                    var tch_id = $(".tchid_select").val();
                    var classid = $(".classid").val();
                    $.ajax({
                        type:'POST',
                        url:'/updateclass',
                        data:{tch_id:tch_id, id:classid},
                        dataType:'json',
                        success:function(res){
                            document.getElementById("close").click();
                            alert(res.msg);
                            datarow.text(tch_id);
                            datarow.val(tch_id);
                            datarow.parent().next().text(bianhao);
                            //document.getElementById("search").click();
                        },
                    });
                })

            })
        </script>
        
    </head>
    <body>
        <div th:replace="base/base::baseheader"></div>
        <div class="row content">
            <div th:replace="base/base::basemenu"></div>
            <div class="mainview">
                <div class="menutitle">
                    <b style="font-size: 26px;margin-left: 30px;">课程信息</b>
                </div>
                <div style="margin-top:30px;">
                    <div class="col-md-4"></div>
                    <div class="col-md-1">
                        <select class="form-control" name="grades" id="grades">
                            <option value="" hidden>--年级--</option>
                            <!-- <option th:each="item:${grades}" th:value="${item}" th:text="${item}年级"></option> -->
                            <option value="1">1年级</option>
                            <option value="2">2年级</option>
                            <option value="3">3年级</option>
                        </select>
                    </div>
                    <div class="col-md-1">
                        <select class="form-control" name="classes" id="classes">
                            <option value="" hidden>--班级--</option>
                            <option value="1">1班</option>
                            <option value="2">2班</option>
                            <option value="3">3班</option>
                            <option value="4">4班</option>
                            <option value="5">5班</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <input class="form-control" type="text" id="tchid" placeholder="教师职工号">
                    </div>
                    <div class="col-md-2">
                        <input class="form-control" type="text" id="tchname" placeholder="教师姓名">
                    </div>
                    <div class="col-md-2">
                        <button id="search" class="btn btn-primary">查询</button>
                        <button id="clear" class="btn btn-default" onclick="clear()">清空</button>
                    </div>
                </div>
                <div>
                    <div class="col-md-1"></div>
                    <div class="col-md-10" style="height:calc(100vh - 330px);margin-top:30px;overflow-y: auto;">
                        <div id="nodata"></div>
                        <table id="classtbl" class="table table-bordered table-hover col-md-6" style="margin: 30px 0;font-size:16px;">
                            
                        </table>
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form>
                                            <div class="form-group">
                                                <label class="control-label">职工号:</label>
                                                <select class="form-control tchid_select">
                                                    <option class="chinese subjects" th:each="item:${chinese}" th:value="${item.tch_id}" th:tchname="${item.name}" th:text="${item.tch_id}" hidden="hidden"></option>
                                                    <option class="math subjects" th:each="item:${math}" th:value="${item.tch_id}" th:tchname="${item.name}" th:text="${item.tch_id}" hidden="hidden"></option>
                                                    <option class="english subjects" th:each="item:${english}" th:value="${item.tch_id}" th:tchname="${item.name}" th:text="${item.tch_id}" hidden="hidden"></option>
                                                    <option class="physics subjects" th:each="item:${physics}" th:value="${item.tch_id}" th:tchname="${item.name}" th:text="${item.tch_id}" hidden="hidden"></option>
                                                    <option class="chemistry subjects" th:each="item:${chemistry}" th:value="${item.tch_id}" th:tchname="${item.name}" th:text="${item.tch_id}" hidden="hidden"></option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="message-text" class="control-label">姓名:</label>
                                                <input type="text" class="form-control tch_name" disabled id="message-text">
                                                <input type="hidden" class="classid" value="">
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" id="close" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary" id="revise">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                </div>
                <div id="paging" style="height:40px;display:none;width:362px;margin: 0 auto;margin-top:calc(100vh - 220px);">
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" id="firstpage" class="btn btn-default">首页</button>
                        <button type="button" id="previous" class="btn btn-default">上一页</button>
                        <button type="button" id="next" class="btn btn-default">下一页</button>
                        <button type="button" id="lastpage" class="btn btn-default">尾页</button>
                        <div class="btn-group dropup">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                设置每页条数 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="pagesize">5</a></li>
                                <li><a class="pagesize">10</a></li>
                                <li><a class="pagesize">15</a></li>
                                <li><a class="pagesize">20</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div th:replace="base/base::basefooter"></div>

        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
</html>
